<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:200px;height:200px;background: red;overflow: hidden;margin: 30px;}
        .xbox{width:80px;height:80px;margin: 70px;background: pink;}
        .box2{width:200px;height:200px;background: red;overflow: hidden;margin: 30px;}
    </style>
</head>
<body style="height:1000px;">
    <div class="box">
        <div class="xbox"></div>
    </div>
    <div class="box2"></div>
</body>
<script>
    var box = document.querySelector(".box")
    var box2 = document.querySelector(".box2")

    box.onclick = function(eve){
        var e = eve || window.event;
        // 相对于 触发事件的元素 的坐标
        // console.log(e.offsetX, e.offsetY);
        // 相对于 浏览器的可视区域 的坐标
        // console.log(e.clientX, e.clientY);
        // 相对于 网页 的坐标
        // console.log(e.pageX, e.pageY);
        // 相对于 显示器 的坐标
        // console.log(e.screenX, e.screenY);

        // 事件类型
        // console.log( e.type );

        // 事件目标：触发事件的元素
        // 正常
        // console.log( e.target );
        // IE低版本
        // console.log( e.srcElement );
        // 兼容处理
        var target = e.target || e.srcElement;
        console.log(target);
    }

    box2.onmousedown = function(eve){
        var e = eve || window.event;

        // 鼠标按键：0左，2右
        // console.log( e.button );

        // 鼠标按键：1左，2右
        console.log( e.buttons );
        
    }
</script>
</html>